<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心理智能对话助手 - 贵州省先进计算全省重点实验室</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/index_css.css' %}">

</head>
<body style="height: 100%;">
<div class="header"
     style="background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); padding: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-bottom: 1px solid rgba(74,85,104,0.1);">
    {% load static %}
    <h1 style="margin-left: 10px; font-size: 40px; ">贵州省先进计算全省重点实验室</h1>
    <!-- 用户认证区域 -->
    <div class="user-auth-section" id="userAuthSection">
        <!-- 已登录用户信息 -->
        <div class="user-info" id="userInfo" style="display: none;">

            <div class="user-menu">
                <div style="display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 8px; margin-bottom: 8px;"
                     onclick="toggleUserDropdown()">
                    <div class="user-avatar" id="userAvatar">用</div>
                    <div class="user-name" id="userName">用户名</div>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                        <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                              stroke-linejoin="round"/>
                    </svg>
                </div>
                <div class="user-dropdown" id="userDropdown">
                    <a href="#" class="dropdown-item" onclick="viewProfile()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                            <path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21"
                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                  stroke-linejoin="round"/>
                            <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round"/>
                        </svg>
                        个人资料
                    </a>
                    <a href="#" class="dropdown-item" onclick="viewSettings()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                            <path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22"
                                  stroke="currentColor" stroke-width="2"/>
                        </svg>
                        设置
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item" onclick="logout()">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                            <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9"
                                  stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                  stroke-linejoin="round"/>
                            <polyline points="16,17 21,12 16,7" stroke="currentColor" stroke-width="2"
                                      stroke-linecap="round" stroke-linejoin="round"/>
                            <line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2"
                                  stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        退出登录
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>


<div class="main-container" style="display: flex;">
    <!-- 左侧功能选择面板 -->
    <div class="function-sidebar">
        <h3>🛠️ 功能选择</h3>

        <div class="function-item active" data-function="chat" onclick="window.location.href='/index/'">
            <h4><span class="function-icon">💬</span> 智能对话</h4>
            <p>与AI助手进行心理咨询对话，获得情感支持和建议</p>
        </div>

        <div class="function-item" data-function="assessment" onclick="window.location.href='/api/question_page'">
            <h4><span class="function-icon">📊</span> 心理评估</h4>
            <p>进行专业的心理健康评估测试，了解自己的心理状态</p>
        </div>

        <div class="function-item" data-function="image-review" onclick="window.location.href='/picture/'">
            <h4><span class="function-icon">🔍</span> 图片分析</h4>
            <p>上传并分析图片内容，识别潜在的心理健康相关信息</p>
        </div>

        {#        <div class="function-item" data-function="relaxation">#}
        {#            <h4><span class="function-icon">🧘</span> 放松训练</h4>#}
        {#            <p>学习呼吸放松、冥想等技巧，缓解压力和焦虑</p>#}
        {#        </div>#}
        {##}
        {#        <div class="function-item" data-function="emotion">#}
        {#            <h4><span class="function-icon">😊</span> 情绪管理</h4>#}
        {#            <p>记录和分析情绪变化，学习情绪调节策略</p>#}
        {#        </div>#}
        {##}
        {#        <div class="function-item" data-function="diary">#}
        {#            <h4><span class="function-icon">📝</span> 心情日记</h4>#}
        {#            <p>记录每日心情和想法，进行自我反思和成长</p>#}
        {#        </div>#}

        <div class="function-item" data-function="resources" onclick="window.location.href='/learning/'">
            <h4><span class="function-icon">📚</span> 学习资源</h4>
            <p>浏览心理健康相关的文章、视频和学习材料</p>
        </div>

{#        <div class="function-item" data-function="crisis" onclick="window.location.href='/crisis/'">#}
{#            <h4><span class="function-icon">🆘</span> 危机干预</h4>#}
{#            <p>在紧急情况下获得及时的心理支持和帮助</p>#}
{#        </div>#}


    </div>

    <!-- 历史对话侧边栏 -->
    <div class="history-sidebar" id="historySidebar">
        <div class="resize-handle" id="resizeHandle"></div>
        <div class="history-header">
            <h3>🕘 历史对话</h3>
            <button class="history-toggle" onclick="toggleHistorySidebar()">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                    <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>

        <div class="conversation-list" id="conversationList">
        </div>
    </div>

    <!-- 聊天容器 -->
    <div class="chat-container" style="display: flex; height: calc(100vh - 150px); overflow: hidden;flex: 3">
        <!-- 原始 chat-container 内容粘贴到这里 -->
        <div class="messages-area" id="messagesArea">
            <div class="welcome-message" style="display: flex; justify-content: center;">
                {% load static %}
                <div style="display: flex; align-items: flex-start; max-width: 1000px;">
                    <img src="{% static 'img/assistant_boy1.png' %}" alt="男人物图片"
                         style="max-width: 170px; height: auto; margin-right: 15px; align-self: flex-end;">
                    <div>
                        <div class="welcome-title" style="font-weight: bold; font-size: 32px; margin-bottom: 10px;">
                            🎉 欢迎使用心理智能对话助手
                        </div>
                        <p style="font-size: 18px;">🧠 您的专属心理支持伙伴已上线！</p>
                        <p style="font-size: 18px;">您好，我是您的心理智能助手 🤖</p>
                        <p style="font-size: 18px;">我可以倾听您的困扰，解答疑问，提供建议，</p>
                        <p style="font-size: 18px;">并与您进行温暖而专业的对话 💬✨</p>
                        <p style="font-size: 18px;">无论是情绪低落、压力过大，还是人际关系困扰，</p>
                        <p style="font-size: 18px;">我都会尽力陪伴与支持您，一起找到前行的力量 💡💗</p>
                        <p style="font-size: 18px;">您不是一个人，有我在这里陪伴您每一步。</p>
                        <p style="font-size: 18px;">📥 请在下方输入您的问题，让我们开始这段对话之旅吧！</p>
                    </div>
                    <img src="{% static 'img/assistant_girl.png' %}" alt="女人物图片"
                         style="max-width: 170px; height: auto; margin-right: 15px; align-self: flex-end;">
                </div>
            </div>

        </div>

        <div class="typing-indicator" id="typingIndicator">
            <div class="message">
                <div class="message-avatar assistant-avatar">AI</div>
                <div class="typing-dots">
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                </div>
            </div>
        </div>

        <div class="input-area">
            <div class="input-container">
                <textarea
                        class="message-input"
                        id="messageInput"
                        placeholder="请输入您的消息..."
                        rows="1"></textarea>
                <button class="send-button" id="sendButton">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                        <path d="M7 11L12 6L17 11M12 18V7" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                              stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- 右侧问卷展示容器，初始隐藏 -->
    <div class="questionnaire-container" id="questionnaireContainer"
         style="flex: 1; display: none; padding: 20px; border-left: 1px solid #ccc; background-color: #f9f9f9;">
        <div id="questionnaireList"></div>
        <div id="questionnaireEmbedArea" style="margin-top: 20px;"></div>
    </div>
</div>


<div class="footer">
    © 2025 贵州省先进计算全省重点实验室 版权所有
</div>
{% load static %}
<script src="{% static 'js/index_js.js' %}"></script>
<script src="{% static 'js/marked.min.js' %}"></script>
</body>
</html>


